<template>
  <div class="studyBox">
    <!-- 试题部分 -->
    <div class="left">
      <div class="leftTop">
        <div v-for="(item, index) in studyAll" :key="index">
          <div class="studyItem">
            <div class="num">{{ item[0] }}</div>
            <div class="ufunc">{{ item[1] }}</div>
            <div class="num">{{ item[2] }}</div>
            <div class="ufunc">{{ item[3] }}</div>
            <div class="num">{{ item[4] }}</div>
            <div class="getResult">=</div>
            <div class="resultNum" v-show="isShowResult">{{ item[5] }}</div>
          </div>
        </div>
      </div>
      <div class="leftBottom">
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
      </div>
    </div>
    <!-- 操作部分 -->
    <div class="right">
      <div class="rightItem">
        <el-button type="primary" @click="get20Arr">20 内混合</el-button>
        <el-button type="primary" @click="get50Arr">50 内混合</el-button>
        <el-button type="primary" @click="get100Arr">100 内混合</el-button>
      </div>
      <div class="rightItem">
        <el-button type="primary" @click="getStudyArr">试 题</el-button>
        <el-button type="success" @click="getResult">答 案</el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ufuncArr: ['+', '-', 'x', '÷'], // 运算法则
      ufuncArr: ['+', '-'], // 运算法则
      studyAll: [], // 所有习题数组
      isShowResult: false, // 是否显示答案
      studyType: [5, 20]
    }
  },
  created() { },
  computed: {},
  mounted() {
    this.getStudyAll()
  },
  methods: {
    getStudyAll() {
      this.studyAll = []
      for (let i = 1; i <= 40; i++) {
        let studyItem = []
        // 随机得到 num1
        let num1 = Math.floor(Math.random() * (this.studyType[1] - this.studyType[0]) + this.studyType[0] + 1)
        studyItem[0] = num1
        // 随机得到 第一个运算规则
        let ufunc1 = ''
        let index1 = Math.floor(Math.random() * this.ufuncArr.length)
        // console.log('index1------', index1, this.ufuncArr[index1])
        ufunc1 = this.ufuncArr[index1]
        studyItem[1] = ufunc1
        // 根据 num1 和运算规则 随机得到 num2
        let num2 = 0
        if (ufunc1 == '+') {
          let jieguo = this.studyType[1] - studyItem[0]
          num2 = Math.floor(Math.random() * jieguo + 1)
        } else if (ufunc1 == '-') {
          num2 = Math.floor(Math.random() * num1)
        }
        studyItem[2] = num2
        // 计算 num1 ufunc1 num2 的计算结果 -- result12
        let result12 = 0
        if (ufunc1 == '+') result12 = (num1 + num2)
        if (ufunc1 == '-') result12 = (num1 - num2)
        // 随机得到 第一个运算规则
        let ufunc2 = ''
        let index2 = Math.floor(Math.random() * this.ufuncArr.length)
        // console.log('index2------', index2, this.ufuncArr[index2])
        ufunc2 = this.ufuncArr[index2]
        studyItem[3] = ufunc2
        // 根据 num1 num2 和运算规则 随机得到 num3
        let num3 = 0
        if (ufunc2 == '+') {
          let jieguo = this.studyType[1] - result12
          num3 = Math.floor(Math.random() * jieguo + 1)
        } else if (ufunc2 == '-') {
          num3 = Math.floor(Math.random() * result12)
        }
        studyItem[4] = num3
        // 得到该试题的结果
        let result123 = 0
        if (ufunc2 == '+') result123 = (result12 + num3)
        if (ufunc2 == '-') result123 = (result12 - num3)
        studyItem[5] = result123
        // studyItem 添加到所有的试题中
        this.studyAll.push(studyItem)
      }
    },
    // 20 内加减法 点击事件
    get20Arr() {
      this.studyType = [5, 20]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 50 内加减法 点击事件
    get50Arr() {
      this.studyType = [20, 50]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 100 内加减法 点击事件
    get100Arr() {
      this.studyType = [30, 100]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 试题 点击事件
    getStudyArr() {
      this.isShowResult = false
    },
    // 答案 点击事件
    getResult() {
      this.isShowResult = true
    }
  }
}
</script>

<style scoped>
.studyBox {
  display: flex;
}
.left {
  width: 1500px;
  height: 1050px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 100px;
}
.leftTop {
  width: 100%;
  height: 90%;
  /* border: 1px solid green; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.studyItem {
  width: 350px;
  height: 80px;
  border-bottom: 1px solid #aaa;
  /* border: 1px solid red; */
  display: flex;
  font-size: 25px;
  text-align: center;
  line-height: 120px;
}
.num {
  width: 60px;
  height: 80px;
  /* border: 1px solid blue; */
}
.ufunc {
  width: 25px;
  height: 80px;
  /* border: 1px solid blue; */
  font-size: 33px;
  color: red;
}
.getResult {
  width: 25px;
  height: 80px;
  /* border: 1px solid blue; */
  font-size: 30px;
}
.resultNum {
  width: 70px;
  height: 80px;
  /* border: 1px solid blue; */
}
.leftBottom {
  width: 100%;
  height: 100px;
  /* border: 1px solid black; */
  font-size: 25px;
  line-height: 100px;
  display: flex;
  justify-content: space-around;
}
.desItem {
  width: 48%;
  height: 100px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.desItem > .lebel {
  width: 32%;
  height: 100px;
}
.right {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  text-align: center;
  margin-top: 100px;
  margin-left: 100px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightItem {
  width: 500px;
  height: 120px;
  /* border: 1px solid red; */
  line-height: 120px;
}
</style>
